# Migration from Yoga V3

## Install the new NPM package

```sh npm2yarn
npm i graphql-yoga
```

## Drop unused graphiql options `defaultVariableEditorOpen` and `headerEditorEnabled`

These two graphiql options were not used and are now removed completely.

```diff
import { createYoga } from 'graphql-yoga'
import { schema } from './schema'

const yoga = createYoga({
  schema,
  graphiql: {
-    defaultVariableEditorOpen: false,
-    headerEditorEnabled: false
  }
})
```

## Subscriptions use GraphQL over SSE "distinct connections mode"

Yoga previously used a custom, and simple, subscriptions transport over SSE. Now it implements the
[GraphQL over SSE "distinct connections mode"](https://github.com/enisdenjo/graphql-sse/blob/master/PROTOCOL.md#distinct-connections-mode)
instead.

Nothing has changed on the server; but, on the client-side, we recommend you use
[`graphql-sse`](https://the-guild.dev/graphql/sse). The
[recipes section](https://the-guild.dev/graphql/sse/recipes) will help you get going with any client
out there!

## Subscriptions only use SSE (text/event-stream) as transport method

Previously Yoga supported `multipart/mixed` just like `text/event-stream`. However, this was not a
standard and it was not supported by any client. So, we decided to drop it and only support
`text/event-stream` as the transport method.

## Parse and validation cache are now under a single option `parserAndValidationCache`

Previously Yoga used two separate envelop plugins for parsing and caching. Now, it leverages a
custom built plugin focused on Yoga. It therefore yields better performance, feels more native and
of course reduces bundle size.

```diff
import {
  DocumentNode,
-  GraphQLError,
+  validate,
} from 'graphql'
import { createYoga } from 'graphql-yoga'
import { schema } from './my-schema'
import {
  documentCacheStore,
  errorCacheStore,
  validationCacheStore,
} from './my-cache'

interface CacheStore<T> {
  get(key: string): T | undefined
  set(key: string, value: T): void
}

const yoga = createYoga({
  schema,
- parserCache: {
+ parserAndValidationCache: {
    documentCache: documentCacheStore as CacheStore<DocumentNode>,
    errorCache: errorCacheStore as CacheStore<Error>,
+   validationCache: validationCacheStore as CacheStore<typeof validate>,
  },
- validationCache: validationCacheStore as CacheStore<readonly GraphQLError[]>
})
```
